<template>
    <div id="login_back" :style="{ backgroundImage: 'url(' + background_image + ')' }">
        <div :id="pc?'from_back_pc':'from_back_mobile'">
            <div id="from">
                <div align="center">
                    <p style="font-size: 30px; padding: 10px; color: #909399">
                        {{ adress_data.title }}
                    </p>
                    <p style="font-size: 15px; padding: 5px; color: #c0c4cc">
                        {{ adress_data.adress }}
                    </p>
                </div>
                <el-form ref="form" :model="form" label-width="70px" size="small" label-position="left" style="padding: 10px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.user_name" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.user_password" show-password placeholder="请输入密码">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="记住登录">
                        <el-checkbox v-model="form.login_status" placeholder="请输入密码">
                        </el-checkbox>
                    </el-form-item>
                    <el-button type="primary" @click="onSubmit" style="width: 100%">登录</el-button>
                </el-form>
                <div align="right" style="padding:10px">
                    <el-button type="text" @click="$router.push('/register')">注册</el-button>
                    <el-button type="text" @click="$router.push('/forget')">找回密码</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["pc"],
    data() {
        return {
            background_image: 'https://images.unsplash.com/photo-1630412500200-728764552dc5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80', //登录页面组件背景图
            adress_data: {
                //登录头部信息
                title: "登录", //标题
                adress: "因为热爱 快意成长", //简介
            },
            form: {
                //登录表单信息
                user_name: "admin", //用户名
                user_password: "123456", //用户密码
                login_status: false, //记住登陆
            },
            route_data: require("@/unitui/assets/json/route.json"), //路由json数据，模拟后端返回的json，后端返回数据可以与json文件内容相同
            menu_data: require("@/unitui/assets/json/menu.json"), //菜单数组,模拟后端返回的json，后端返回数据可以与json文件内容相同
        };
    },
    methods: {
        onSubmit() {
            //点击登录时触发
            sessionStorage.setItem("route_data", JSON.stringify(this.route_data)); //储存路由数组信息，如果你不适用sessionStorage储存路由信息，则路由初始化会失败，你也可以在这储存后端返回的路由json
            sessionStorage.setItem("menu_data", JSON.stringify(this.menu_data)); //储存菜单信息，用于生成框架内左侧菜单信息
            this.$unit.init_route(); //调用初始化路由功能，依据sessionStorage.getItem("route_data")的信息动态添加路由，要看懂/unitui/unitui_init.js中的内容
            this.$message.success("登录成功，正在为您跳转...");
            setTimeout(() => {
                this.$router.push("/sub/admin"); //执行路由跳转，默认跳转组件管理
            }, 1000);
        },
    },
    mounted() {},
};
</script>

<style scoped>
#login_back {
    width: 100%;
    height: 100vh;
    background-size: cover;
    position: relative;
}

#from_back_pc {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 450px;
    height: 350px;
    background: rgba(255, 255, 255, 0);
}

#from_back_mobile {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 90%;
    height: 350px;
    background: rgba(255, 255, 255, 0);
}

#from {
    width: 100%;
    height: 100%;
    margin-left: 0px;
    background-color: #ffffffe1;
    padding: 0px;
    border-radius: 5px;
}

#from p+p{
    color: #1de2d1;
    margin-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #1de2d1;
    animation: typing 5s steps(25) infinite;
}

@keyframes typing {
    0%{
        width: 0ch;
    }
    75%{
        width: 15ch;
    }
    100%{
        width: 0ch;
    }
}

</style>